<template>
  <div class="index-container">
    <el-row :gutter="20">
      <page-header :indexData="indexData" />
      <PageContent :indexData="indexData" />
      <PageFooter :indexData="indexData" />
    </el-row>
  </div>
</template>

<script>
  import PageHeader from './components/PageHeader'
  import PageContent from './components/PageContent'
  import PageFooter from './components/PageFoother'
  import { getIndexData } from '@/api/index'
  import {mapGetters} from "vuex";

  export default {
    name: 'Index',

    components: {
      PageHeader,
      // eslint-disable-next-line vue/no-unused-components
      PageContent,
      PageFooter
    },

    data() {
      return {
        indexData: {}
      }
    },
    created() {
      getIndexData().then(res => {
        this.indexData = res;
        let get = sessionStorage.getItem('reset_temp_001');
        if(get == '1'){
          sessionStorage.removeItem('reset_temp_001');
          window.location.reload();
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;

    ::v-deep {
      .access,
      .authorization,
      .version-information {
        min-height: 268px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }
          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }

  .panel {
    padding: 20px;
    background-color: #fff;
    background-color: #ffffff;
    border: 1px solid #ebeef5;
    border-radius: 2.5px;
  }

  .chart {
    height: 300px;
  }

  ::v-deep .el-row:not(:first-child) {
    margin-bottom: 20px;
  }
</style>
